<template>
  <div class="addArticle flex H100">
    <div class="w-200 flex2 p-r-10 H100">
      <div><el-button class="W100 m-b-8" @click="$router.go(-1)">返回上一步</el-button></div> 
      <el-button type="primary" class="W100" @click="save">保存文章</el-button>
      <!-- 输入标题 ↓ -->
      <div>
        <h2 class="p-t-5 p-b-5 h-48 l-h-38 cursor-pointer">文章题目</h2>
        <input 
          class="h-50 W100 fz-16 p-l-5 p-r-5" 
          type="text" 
          placeholder="输入文章标题"
          minlength="1"
          maxlength="30"
          v-model="article.articleTitle">
      </div>
      <!-- 输入简介 -->
      <div>
        <h2 class="p-t-6 p-b-6 h-48 l-h-38 cursor-pointer">文章简介</h2>
        <textarea 
          class="W100 p-6" 
          rows="7" 
          v-model="article.articleDescription"
          placeholder="输入文章简介">
        </textarea>
      </div>
      <!-- 选择类型 -->
      <el-scrollbar>
        <div class="h-300">
          <h2 class="p-t-5 p-b-5 h-48 l-h-38 cursor-pointer" @click="articleTypeChooseIndex=null">类型选择</h2>
          <main class="t-color">
            <ul>
              <li 
                v-for="(item, index) in articleTypesList" 
                :key="index" 
                class="h-30 l-h-30 p-l-5 p-r-5 item box-shadow-hover cursor-pointer"
                :class="{active: articleTypeChooseId == item._id?true:false}"
                @click="chooseType(index, item._id)">{{item.articleTypeName}}</li>
            </ul>
          </main>
        </div>
      </el-scrollbar>
    </div>
    <div class="w-831">
      <vue-editor 
        id="editor" 
        useCustomImageHandler
        @image-added="handleImageAdded" 
        v-model="article.articleContent"
        style="height: 93%;"></vue-editor>
    </div>
      
  </div>
</template>

<script>
import moment from 'moment'
export default {
  created() {
    this.getArticleById()
    this.getArticleTypesList()
  },
  data() {
    return {
      articleTypeChooseId: null,
      articleTypesList: [],
      htmlForEditor: '',
      article: {
        articleTitle: '',
        articleDescription: '',
        articleContent:'',
        articleAuthor: localStorage.username,
        articleType: '',
      }
    };
  },
  methods: {
    async getArticleById() {
      let res = await this.api.get('/admin/article/selectArticleById', { params: { id: this.$route.params.id }})
      if(res.code == 0) {
        this.article.articleTitle = res.data.articleTitle
        this.article.articleDescription = res.data.articleDescription
        this.article.articleContent = res.data.articleContent
        this.article.articleAuthor = res.data.articleAuthor
        this.article.articleType = res.data.articleType
        this.articleTypeChooseId = res.data.articleType
      }else {
        this.$message({type: 'warning', message: res.message})
      }
    },
    async handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      let formData = new FormData()
      formData.append("file", file)

      const res = await this.api.post("/admin/uploadArticleImage", formData)
      Editor.insertEmbed(cursorLocation, "image", res.data.address)
      resetUploader();
    },
    getArticleTypesList() {
      this.api.get('/admin/article/getArticleTypeList').then(res => {
        if(res.code == 0){
          this.articleTypesList = res.data
        }else {
          this.$message({ type: 'warning', message: res.message })
        }
      })
    },
    save() {
      this.$confirm('是否保存此文章?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.api.post('/admin/article/updateArticleById', {
          id: this.$route.params.id,
          ...this.article
        })
        if(res.code == 0) {
          this.$router.replace({path: '/admin/articleList'})
          this.$message({type: 'success', message: res.message})
        }else {
          this.$message({type: 'warning', message: res.message})
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消保存'
        })     
      })
      
    },
    chooseType(index, id) {
      this.articleTypeChooseId = id
      this.article.articleType = id
    }
  }
};
</script>

<style lang="scss">
.addArticle {
  .active {
    border-left: 2px solid #fa6706;
    background: rgba(250, 103, 6, 0.3) !important;
  }
  .item {
    background: rgba(192, 196, 204, 0.3);
    margin-bottom: 2px;
  }
}
</style>